<!-- <template>
  <div class="container">
    <h1>这里是根组件（App）</h1>
  </div>
</template>

<script lang="ts" setup name="App">
</script>

<style scoped lang="scss">
.container {
  width: 600px;
  height: 400px;
  background: black;
  h1 {
    color: white;
  }
}
</style> -->
<!-- <template>
  <div class="container">
    <h1>这里是根组件（App）</h1>
    <el-button type="primary" size="default" :icon="Edit">编辑按钮</el-button>
  </div>
</template>

<script lang="ts" setup name="App">
/* for (let i = 0; i < 10; i++) {
  console.log(i);
}
let string = "This is a string"; */
import {Edit} from "@element-plus/icons-vue";
// 通过import.meta.env获取环境变量↓
console.log(import.meta.env)
</script>

<style scoped lang="scss">
.container {
  width: 600px;
  height: 400px;
  background: black;
  h1 {
    color: white;
  }
}
</style> -->
<template>
  <div>
    <!-- <h1>测试svg图标</h1> -->
    <!-- 测试怎么使用svg图标（注：下面的代码中的“svg”组件标签是开发者在使用“svg”图标时，位于最外层的“容器组件（节点）”，需要在“标签体”中与“use”组件标签做搭配，一起使用）↓ -->
    <!-- 抽取下面的代码，把它们封装为全局组件“svgIcon”（这样做的好处是“可以复用代码”，并且全局组件只需要被注册一次，不需要在其他组件中被导入）↓ -->
    <!-- <svg style="width:30px;height:30px;"> -->
    <!-- 注：1.属性“xlink:href”被用于“指定用哪一个图标”，属性值必须采用“#icon-图标文件名”这种格式（否则图标就不能用）；2.属性“fill”被用于“指定填充颜色（即设置图标的颜色）”↓ -->
    <!-- <use xlink:href="#icon-phone" fill="red"></use> -->
    <!-- </svg> -->
    <!-- <svgIcon/> -->
    <!-- <svgIcon name="home" color="pink" width="100px" height="100px"/> -->
    <!-- <svgIcon name="phone"/> -->
    <!-- <Pagination/> -->
    <h1>测试能否在“style”标签中书写使用了“sass”语法的代码</h1>
  </div>
</template>

<script lang="ts" setup name="App">
import request from '@/utils/request'
import {onMounted} from 'vue'
// 导入全局组件↓
// 注：如果在此处不加上“@ts-ignore”注释，那么VSCode的插件会报错说“找不到模块“@/components/svgIcon/index.vue”或其相应的类型声明。ts-plugin(2307)”。由于开发者在封装组件时没有提供类型声明，所以最好在此处加上此注释，以不让VSCode标红报错↓
// @ts-ignore
// import svgIcon from '@/components/svgIcon/index.vue'
// 当组件挂载完毕时，测试发送一个网络请求↓
onMounted(()=>{
  request({
    url: '/user/login',
    method: 'post',
    data: {
      username: 'admin',
      password: '111111'
    }
  }).then(res=>{
      console.log(res); // {data: {…}, status: 200, statusText: 'OK', headers: AxiosHeaders, config: {…}, …}
    })
})
</script>

<style scoped lang="scss">
div {
  h1 {
    // color: red;
    // 使用“scss”全局变量——“$color”来定义同一条样式规则↑↓
    color: $color;

  }
}
</style>